<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">职位管理</span>
        
        <el-button type="primary" size="mini" class="info"  @click="reflush">刷新</el-button>
      </div>
       
    </div>
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button
          type="primary"
          size="mini"
          class="info1"
          @click="getdept()"
          >添加</el-button
        >
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="position" label-width="80px">
            <el-form-item label="所属部门">
            <el-select v-model="position.deptname" placeholder="请选择">
              <el-option
                v-for="item in Dept"
                :key="item.id"
                :label="item.deptname"
                :value="item.deptname"
              >
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="职位名称">
              <el-input v-model="position.positionname"></el-input>
            </el-form-item>
            <el-form-item label="职能描述">
              <el-input v-model="position.functions"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="onSubmit"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table
          :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <!-- 
                        客户名称
                        客户类型
                        联系人
                        联系电话
                        地址
                        创建人
                        负责人
                        创建时间
                        操作 -->
          <el-table-column prop="positionname" label="职位名称"></el-table-column>
          <el-table-column prop="functions" label="职位描述"></el-table-column>
          <el-table-column prop="addtime" label="添加时间"> </el-table-column>
          <el-table-column label="是否启用" prop="status">
            <!-- 表格中的开关使用 -->
            <template slot-scope="scoped">
              <el-switch
                v-model="scoped.row.status"
                style="display: block; width: auto; height: auto"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeStatus($event, scoped.row, scoped.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="操作">
            <template scope="scope">
              <el-button
                type="text"
                @click="handleDelete(scope.row.id)"
                size="small"
                >删除</el-button
              >
              <el-button type="text" @click="handleEdit(scope.row)" size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    //页面一加载，调用方法
    this.reflush();
  },
  data() {
    return {
      isShow: true,
      a: {
        
      },
      tableData: [
      ],
      Dept: [],
      // value: "",
      // 弹窗显示控制属性
      // dialogVisible: false,
      // status: true,
      // 部门信息
      position: {
        positionname: "",
        functions: "",
        deptname: "",
        addtime: "",
        status: "1",
      },
      dialogVisible: false,
      // position: [
      //   {
      //     positionname: "",
      //     functions: "",
      //     status: true,
      //   },
      // ],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async handleDelete(id) {
      //确认提示框
      const confirmResult = await this.$confirm(
        "此操作将永久删除该职位, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err); //用户确认删除，返回字符串 confirm //用户取消删除，返回字符串 cancel
      if (confirmResult != "confirm") {
        this.$message.info("已取消删除");
      } else {
        //确认删除
        const { data: res } = await this.$http.get("position/delPosition", {
          params: { id: id },
        });
        console.log(res.data);
        if (res.data != "success") {
          this.$message.error("删除职位失败");
        } else {
          //隐藏添加对话框
          this.$message.success("删除职位成功");
          this.reflush();
        }
      }
    },
    onSubmit() {
      let dt = new Date();
      var y = dt.getFullYear();
      var mt = (dt.getMonth() + 1).toString().padStart(2, "0");
      var day = dt.getDate().toString().padStart(2, "0");
      var h = dt.getHours().toString().padStart(2, "0");
      var m = dt.getMinutes().toString().padStart(2, "0");
      this.position.addtime = y + "-" + mt + "-" + day + " " + h + ":" + m;
      console.log("此刻时间", this.position.addtime);
      console.log("部门", this.position);
      console.log("提交!");
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 发起真正的提交
          const { data: res } = await this.$http.post(
            "position/addPosition",
            this.position
          );
          console.log(res.data);
          this.reflush();
          if (res.data != "添加成功") {
            this.$message.error("添加失败");
          } else {
            //隐藏添加对话框
            this.dialogVisible = false;
            this.reflush();
            this.$message.success("添加成功");
          }
        }
      });
    },
     changeStatus(e, row, index) {
      // console.log(e, row, index); //e返回状态，row当前行数据，index下标
    },
    // 查询
    async reflush() {
      const { data: resp } = await this.$http.get("position/getPosition");
      this.tableData = resp.data;
      console.log(resp.data);
    },
    // 查询部门
    async getdept() {
      this.dialogVisible = true;
      const { data: resp } = await this.$http.get("dept/getDept");
      this.Dept = resp.data;
      console.log(this.Dept);
    },
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>